import React,{ Component } from "react";
import {Breadcrumb, Icon, Row, Col, Table, Button, Modal, Input, message} from 'antd'
import { Link, withRouter } from 'react-router-dom'
import './business.less'
import API from '../../api/business/business'
import moment from 'moment'
import StoreViewer from  '../../components/Business/StoreViewer'
import MerchantsViewer from '../../components/Business/MerchantsViewer'
const { Column } = Table;
const confirm = Modal.confirm
const { TextArea } = Input
class PersonList extends Component{
    state = {
        showStoreViewer: false,
        refulseVisble: false,
        query: {},
        shopInfo: {},
        btnView: {},
        auditStatus: {
            1: '待审核',
            10: '审核通过',
            20: '审核拒绝'
        },
        storeList: [],
        isEditing: false,
        shop_id: null,
        editingMerchants: false,
        showMerchantViewer: false
    }
	componentDidMount(){
        this.getDetail()
        this.getStoreList()
	}
    doStoreViewer = () => {
        this.setState({showStoreViewer: false})
    }
    getDetail = (val) => {
        API.getDetail({shop_id: this.props.match.params.id}).then(res => {
            if (res.error === 0) {
                this.setState({shopInfo: res.data.shopInfo, btnView: res.data.btnView})
            }
        })
    }
    dateFormat = (time) => {
        return time && time !== "0" ? moment(parseInt(time, 10) * 1000).format('YYYY-MM-DD HH:mm:ss') : ''
    }
    auditShop = (status) => {
        let that = this
        confirm({
            title: '提示',
            content: '确定审核吗？',
            onOk() {
                API.auditShop({shop_id: that.props.match.params.id, audit_status: status}).then(res => {
                    if (res.error === 0) {
                        Modal.success({
                            title: '',
                            content: '成功',
                        })
                        that.getDetail()
                    } else {
                        Modal.error({
                            title: '',
                            content: res.msg || '操作失败',
                        })
                    }
                })
            }
        })

    }
    refuseShop = () => {
        this.setState({refulseVisble: true})
    }
    cancelRefuseShop = () => {
        this.setState({refulseVisble: false})
    }
    doRefuse = () => {
        let that = this
        let reason = document.getElementById("reason").value
        if (!reason) {
            message.error('请输入拒绝审核理由！')
            return
        }
        API.auditShop({shop_id: that.props.match.params.id, audit_status: 20, refuse_reason: reason}).then(res => {
            console.log(res.data)
            if (res.error === 0) {
                Modal.success({
                    title: '',
                    content: '成功',
                    onOk () {
                        that.getDetail()
                        that.setState({refulseVisble: false})
                    }
                })
            } else {
                Modal.error({
                    title: '',
                    content: res.msg || '操作失败',
                    onOk () {
                        that.setState({refulseVisble: false})
                    }
                })
            }
        })

    }
    toggleShop = (status) => {
        let that = this

        confirm({
            title: '提示',
            content: status === 1 ? '确定启用吗？' : '确定停用吗?',
            onOk() {
                API.toggleShop({shop_id: that.props.match.params.id, shop_status: status}).then(res => {
                    console.log(res.data)
                    if (res.error === 0) {
                        Modal.success({
                            title: '',
                            content: '成功',
                        })
                        that.getDetail()
                    } else {
                        Modal.error({
                            title: '',
                            content: res.msg || '操作失败',
                        })
                    }
                })
            }
        })

    }
    getStoreList = () => {
        API.getStoreList({shop_id: this.props.match.params.id}).then(res => {
            if (res.error === 0) {
                this.setState({storeList: res.data.listData})
            } else {
               console.log(res)
            }
        })
    }
    addStore = () => {
        this.setState({showStoreViewer: true, rowInfo: {}, shop_id: this.props.match.params.id, isEditing: false})
    }
    editStore = (rowInfo) => {
        this.setState({showStoreViewer: true, shop_id: rowInfo.shop_id, isEditing: true, rowInfo: rowInfo})
    }
    editMerchant = () => {
        this.setState({editingMerchants: true, showMerchantViewer: true})
    }
    doMerchantViewer = () => {
        this.setState({showMerchantViewer: false})
    }
    goodsManage = () => {
        this.props.history.push("/goods/list", {shop_id: this.props.match.params.id, shop_name: this.state.shopInfo.shop_name})
    }
    createGoods = () => {
        this.props.history.push("/goods/detail/select", {shop_id: this.props.match.params.id})
    }
	render(){
        const shopInfo = this.state.shopInfo
        const btnView = this.state.btnView
		return(
			<div>
				<div className="common-bread">
                    <Breadcrumb style={{ margin: '12px 0' }}>
                        <Breadcrumb.Item>
                            <Link to={`/dashboard`}><Icon type="home" /></Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>商家管理</Breadcrumb.Item>
                        <Breadcrumb.Item>商家列表</Breadcrumb.Item>
                        <Breadcrumb.Item>商家详情</Breadcrumb.Item>
                    </Breadcrumb>
				</div>
                <div className='detailInfoTable'>
                    <Row>
                        <Col span={12}>商家ID：{shopInfo.id}</Col>
                        <Col span={12}>商家名称：{shopInfo.shop_name}</Col>
                    </Row>
                    <Row>
                        <Col span={12}>商家银行：{shopInfo.card_name}</Col>
                        <Col span={12}>联系人：{shopInfo.contact}</Col>
                    </Row>
                    <Row>
                        <Col span={12}>联系电话：{shopInfo.shop_tel}</Col>
                        <Col span={12}>审核状态：{this.state.auditStatus[shopInfo.audit_status]}</Col>
                    </Row>
                    <Row>
                        <Col span={12}>申请入驻时间：{this.dateFormat(shopInfo.add_time)}</Col>
                        <Col span={12}>审核通过时间：{this.dateFormat(shopInfo.audit_time)}</Col>
                    </Row>
                    <Row>
                        <Col span={12}>银行卡号:{shopInfo.card_no}</Col>
                        <Col span={12}>开户银行：{shopInfo.card_address}</Col>
                    </Row>
                    <Row>
                        <Col span={12}>营业执照：{shopInfo.shop_prof ? <a target="_blank" href={shopInfo.shop_prof[0].url}>{shopInfo.shop_prof[0].name}</a> : ''}</Col>
                        <Col span={12}>商家启用状态：{parseInt(shopInfo.shop_status, 10) === 0 ? '未启用': '已启用'}</Col>
                    </Row>
                    <Row>
                        <Col span={24}>审核拒绝理由：{shopInfo.refuse_reason}</Col>
                    </Row>
                </div>
                <div className="buttons">
                    {btnView.audit_refuse ? <Button type="primary" onClick={() => this.refuseShop(20)}>拒绝审核</Button> : ''}
                    {btnView.audit_pass ? <Button type="primary" onClick={() => this.auditShop(10)}>审核通过</Button> : ''}
                    {btnView.edit_info ? <Button type="primary" onClick={() => this.editMerchant()}>编辑资料</Button> : ''}
                    {btnView.add_store ? <Button type="primary" onClick={() => this.addStore()}>添加门店</Button> : ''}
                    {btnView.shop_enable ? <Button type="primary" onClick={() => this.toggleShop(1)}>启用商家</Button> : ''}
                    {btnView.shop_disable ? <Button type="primary" onClick={() => this.toggleShop(0)}>停用商家</Button> : ''}
                    <Button type="primary" onClick={() => this.goodsManage()}>商品管理</Button>
                    <Button type="primary" onClick={() => this.createGoods()}>创建商品</Button>
                </div>
                <Modal
                    title="审核拒绝"
                    visible={this.state.refulseVisble}
                    onCancel={this.cancelRefuseShop}
                    onOk={this.doRefuse}
                >
                    <div>
                        <TextArea placeholder="输入拒绝理由" id="reason"></TextArea>
                    </div>
                </Modal>

                <StoreViewer
                    showStoreViewer={this.state.showStoreViewer}
                    isEditing={this.state.isEditing}
                    doStoreViewer={this.doStoreViewer}
                    doSearch={this.getStoreList}
                    shop_id={this.state.shop_id}
                    rowInfo={this.state.rowInfo}
                />
                <MerchantsViewer
                    showViewer={this.state.showMerchantViewer}
                    rowInfo={this.state.shopInfo}
                    isEditing={this.state.editingMerchants}
                    doSearch={this.getDetail}
                    shop_id={this.props.match.params.id}
                    doViewer={this.doMerchantViewer}

                />
                <div>
                    <Table
                        dataSource={this.state.storeList}
                        rowKey="id"
                    >
                        <Column
                            title="门店名称"
                            dataIndex="store_name"
                        />
                        <Column
                            title="联系人"
                            dataIndex="contact"
                        />
                        <Column
                            title="联系电话"
                            dataIndex="store_tel"
                        />
                        <Column
                            title="门店_省"
                            dataIndex="province_name"
                        />
                        <Column
                            title="门店_市"
                            dataIndex="city_name"
                        />
                        <Column
                            title="门店_区"
                            dataIndex="district_name"
                        />
                        <Column
                            title="门店_详细地址"
                            dataIndex="address"
                        />
                        <Column
                            title="营业时间"
                            dataIndex="open_period"
                        />
                        <Column
                            title="开业状态"
                            dataIndex="store_status"
                            render={(text) => {
                                return text === '1' ? '开业' : '关门'
                            }}
                        />
                        <Column
                            title="操作"
                            render={(text, row) => {
                                return <a onClick={() => this.editStore(row)}>编辑</a>
                            }}
                        />
                    </Table>
                </div>
			</div>
		)
	}
}
export default withRouter(PersonList);